<!--
  目标产值
-->
<template>
    <div>
        <searchData ref="searchData" :searchData="searchArr" @search="search"></searchData>
        <a-card :bordered="false" style="overflow: auto">
            <a-button class="mb12" type="primary" style="margin-right: 10px" @click="addTargetValue"
            v-btn-permission="'pm_029_add_08'">新增目标产值</a-button>
            <a-table
                    row-key="id"
                    ref="table"
                    size="default"
                    :scroll="{x: true}"
                    :columns="columns"
                    :data-source="dataSource"
                    :pagination="false"
                    :loading="loading"
                    :expanded-row-keys="expandedRowKeys"
                    @expand="expandedRowsChange"
            >
                <template slot="action" slot-scope="text, record">
                    <MoreButton v-if="record.year">
                        <a @click="jump(record,'look')" v-btn-permission="'pm_029_loo_07'">查看</a>
                        <a @click="jump(record, 'edit')" v-btn-permission="'pm_029_edi_09'">编辑</a>
                    </MoreButton>
                </template>
            </a-table>
            <div style="text-align: right;margin-top: 15px" v-show="dataSource.length">
                <a-pagination
                        :total="total"
                        showQuickJumper
                        showSizeChanger
                        :pageSizeOptions="['10','20','30','40','100']"
                        :show-total="total => `共${total}条数据`"
                        :page-size="pageSize"
                        :current="current"
                        @change="pageChange"
                        @showSizeChange="showSizeChange"
                />
            </div>
        </a-card>
    </div>
</template>

<script>
  import { queryYearTargetList, queryYearTargetBranchDetail } from '@/api/project/productionRecords'
  export default {
    name: 'outputDataStatistics',
    data() {
      return {
        loading: false,
        dataSource: [],
        expandedRowKeys: [],
        queryParam: {},
        searchArr: [
          {
            name: '年度',
            value: 'year',
            type: 'year',
            span: 8
          },
        ],
        total:0,
        current:1,
        pageSize: 10,
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            // fixed: 'left',
          },
          {
            title: '年度',
            dataIndex: 'year',
            width: 80,
            // fixed: 'left',
          },
          {
            title: '公司',
            dataIndex: 'unitName',
            minWidth: 140,
            // fixed: 'left',
          },
          {
            title: '年度产值目标(底线)(亿元)',
            dataIndex: 'yearOutputBaseline',
          },
          {
            title: '年度产值目标(目标)(亿元)',
            dataIndex: 'yearOutputTarget',
          },
          {
            title: '年度产值目标(奋斗)(亿元)',
            dataIndex: 'yearOutputStruggle',
          },
          {
            title: '人均产值目标(底线)(万元)',
            dataIndex: 'perOutputBaseline',
          },
          {
            title: '人均产值目标(目标)(万元)',
            dataIndex: 'perOutputTarget',
          },
          {
            title: '人均产值目标(奋斗)(万元)',
            dataIndex: 'perOutputStruggle',
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: 170,
            fixed: 'right',
            scopedSlots: { customRender: 'action' }
          }
        ],
      }
    },
    created() {
      this.loadData()
    },
    activated() {
      this.loadData()
    },
    methods: {
      jump(row, type) {
        this.$router.push({
          path: "/project/productionRecord/addTargetValue",
          query: {
            id: row.id,
            pageType: type,
              activeKey: this.$route.query.activeKey
          }
        })
      },
      async loadData(){
        this.dataSource = []
        this.loading = true

        try {
          const parms = {
            query:{...this.queryParam},
            pageNo: this.current,
            pageSize: this.pageSize
          }
          if(!parms.query.year) {
            delete parms.query.year
          }
         const {data, totalSize} = await queryYearTargetList(parms)
          this.total = totalSize
          data.forEach((item,index)=>{
            item.index = index+1
            item.children = [{id:index}]
          })
          this.dataSource = data;
          this.loading = false
        } catch (error) {
          this.loading = false
          return Promise.reject(error)
        }
      },
      search(val) {
        this.current = 1;
        this.queryParam = val;
        this.loadData()
      },
      queryYearTargetBranchDetail(id) {
        this.loading = true;
        queryYearTargetBranchDetail(id).then(res=>{
          this.dataSource.forEach(item=>{
            if(item.id === id) {
              res.data.forEach(z=>{
                z.year = ""
              })
              item.children = res.data
            }
          })
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
      },
      expandedRowsChange(expanded, record) {
        if (expanded) {
          if(record.children&&record.children.length === 1) {
            if(!record.children[0].year) {
              this.queryYearTargetBranchDetail(record.id)
            }
          }
          this.expandedRowKeys.push(record.id)
        } else {
          this.expandedRowKeys.splice(
            this.expandedRowKeys.findIndex((el) => el === record.id),
            1
          )
        }
      },
      addTargetValue() {
        this.$router.push("/project/productionRecord/addTargetValue")
      },
      pageChange(page, pageSize) {
        this.current = page;
        this.pageSize = pageSize;
        this.loadData()
      },
      showSizeChange(current, size) {
        this.current = current;
        this.pageSize = size;
        this.loadData()
      }
    }
  }
</script>

<style scoped>

</style>